<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <div>
            <h3>猜数字游戏</h3>
            玩家输入一个 1-100 的数字：<input id="inpiut_num" type="text" name="" id="">
            <p></p>
            <input type="button" value=" 查看结果 " onclick="selectResult()">
            <div id="result_div">

            </div>
        </div>




        <img id="img_logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

        <p></p>
        <input onclick="upImg()" type="button" value="更换图片"> &nbsp;&nbsp;

        <hr>

        <script>
            //jquery就是比原生版本的js更好用，对浏览器的兼容性是更好的
            //代码会更简洁
            //jquery版本猜数字游戏
            function selectResult_JQ() {
                //生成一个随机数
                var randomNum = 1 + Math.floor(Math.random() * 10);
                //拿到用户猜的数字
                var userInputNum = jQuery("#input_num").val();
                var msg;
                if (randomNum == userInputNum) {
                    msg = "<h4>恭喜您猜对了！</h4>";
                } else {
                    msg = "<h4>抱歉，您猜错了！正确的数字是：" + randomNum + "</h4>";
                }
                //document
                jQuery("#result_div").html(msg);

                //如果（）中没有写msg，就是获取html，如果写了参数就是设置
                //如果拿text就是下边的代码的方式
                // jQuery("#result_div").text();
            }


            //原生版本的猜数字游戏
            function selectResult() {
                //首先产生一个随机数 1 - 10
                //floor是底板的意思，就是向下取整的意思。random会生成一个0-1的随机数
                var randomNum = 1 + Math.floor(Math.random() * 10);
                var userInputNum = document.getElementById("inpiut_num").value;//获得用户输入的数字
                //value是一个属性，就是获得值的意思
                var msg;
                //根据用户输入的数字判断猜数字是否正确
                if (randomNum == userInputNum) {
                    msg = "<h4>恭喜您猜对了！</h4>";

                } else {
                    msg = "<h4>正确的数字是：抱歉，您猜错了,正确的数字是：" + randomNum + "</h4>";
                }
                //然后要把这个结果显示到窗口中
                //是返回到那个div中，所以先获得div的id（一般获取html的元素都是id，因为id是唯一的）
                document.getElementById("result_div").innerHTML = msg;
            }


            function upImg() {
                var sg_img = "https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_880x280_06c7476.png?v=628ed034";
                document.getElementById("img_logo").src = sg_img;
            }

        </script>
    </body>

</html>